<template>
  <div id="detail">
    <detail-nav-bar
      @itemCilck="itemCilck"
      :currentIndex="currentIndex"
    ></detail-nav-bar>
    <scroll
      ref="scroll"
      class="detail-scroll"
      :probeType="3"
      @scroll="scroll"
      :listenScroll="true"
    >
      <swiper ref="swiper" class="detail-swipwe" :imgList="topImages"></swiper>
      <detail-base-info :goods="goods"></detail-base-info>
      <shop-info :shop="shop"></shop-info>
      <detail-info
        ref="detailInfo"
        :detailInfo="detailInfo"
        @imgLoad="imgLoad"
      ></detail-info>
      <detail-params ref="params" :paramInfo="paramInfo"></detail-params>
      <detail-comment ref="comment" :commentInfo="commentInfo"></detail-comment>
      <detail-recomment
        ref="recomment"
        :detailRecomment="recommend"
        @imgLoad="imgLoad"
      ></detail-recomment>
    </scroll>
    <detail-tab-bar @addToCart="addToCart"></detail-tab-bar>
    <back-top v-show="isBackTop" class="back-top" @backTopClick="backTopClick"
      ><img src="~assets/img/common/top.png"
    /></back-top>
  </div>
</template>

<script>
import DetailNavBar from "./childComps/DetailNavBar";
import DetailTabBar from "./childComps/DetailTabBar";
import DetailBaseInfo from "./childComps/DetailBaseInfo";
import ShopInfo from "./childComps/ShopInfo";
import DetailInfo from "./childComps/DetailInfo";
import DetailParams from "./childComps/DetailParams";
import DetailComment from "./childComps/DetailComment";
import DetailRecomment from "./childComps/DetailRecomment";
import BackTop from "components/content/backTop/BackTop";
import Swiper from "components/common/swiper/Swiper";
import Scroll from "components/common/scroll/Scroll";
import { mapActions } from "vuex";
import {
  getDetail,
  getRecommend,
  Goods,
  Shop,
  GoodsParam,
} from "netword/detail";
export default {
  name: "Detail",
  components: {
    DetailNavBar,
    DetailTabBar,
    Swiper,
    BackTop,
    Scroll,
    DetailBaseInfo,
    ShopInfo,
    DetailInfo,
    DetailParams,
    DetailComment,
    DetailRecomment,
  },
  data() {
    return {
      iid: "",
      currentIndex: 0,
      topImages: [],
      goods: {},
      shop: {},
      detailInfo: {},
      paramInfo: {},
      commentInfo: {},
      recommend: [],
      isBackTop: false,
      themeTops: [],
      timer: null,
    };
  },
  created() {
    this._getDetail();
    this._getRecommend();
  },
  updated() {
    this.getOffsetTops();
  },
  methods: {
    ...mapActions(["increment"]),
    itemCilck(index) {
      this.currentIndex = index;
      this.$refs.scroll.scrollTo(0, -this.themeTops[index]);
    },
    backTopClick() {
      this.$refs.scroll.scrollTo(0, 0);
    },
    scroll(pos) {
      const scrollTo = -pos.y;
      this.isBackTop = scrollTo > 1000;

      this.listenScrollTheme(scrollTo);
    },
    imgLoad() {
      if (this.timer) clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.$refs.scroll.refresh(scrollTo);
        this.getOffsetTops();
      }, 100);
    },
    addToCart() {
      const goods = {
        iid: this.iid,
        image: this.topImages[0],
        title: this.goods.title,
        price: this.goods.nowPrice,
        desc: this.goods.desc,
      };
      this.$store
        .dispatch("increment", goods)
        .then((res) => {
          this.$toast.show(res);
        })
        .catch((err) => {
          this.$toast.show("系统出错了！");
        });
    },
    getOffsetTops() {
      this.themeTops = [];
      this.themeTops.push(this.$refs.swiper.$el.offsetTop);
      this.themeTops.push(this.$refs.params.$el.offsetTop);
      this.themeTops.push(this.$refs.comment.$el.offsetTop);
      this.themeTops.push(this.$refs.recomment.$el.offsetTop);
      this.themeTops.push(100000);
    },
    listenScrollTheme(scrollTo) {
      for (let i = 0; i < this.themeTops.length; i++) {
        let ipos = this.themeTops[i];
        if (ipos <= scrollTo && this.themeTops[i + 1] > scrollTo) {
          if (this.currentIndex !== i) {
            this.currentIndex = i;
          }
          break;
        }
      }
    },
    _getDetail() {
      this.iid = this.$route.params.iid;
      getDetail(this.iid).then((res) => {
        // 2.1.获取结果
        const data = res.result;
        // 2.2.获取顶部信息
        this.topImages = data.itemInfo.topImages;
        // 2.3.获取商品信息
        this.goods = new Goods(
          data.itemInfo,
          data.columns,
          data.shopInfo.services
        );
        // 2.4.获取店铺信息
        this.shop = new Shop(data.shopInfo);
        // 2.5.获取商品信息
        this.detailInfo = data.detailInfo;
        // 2.6.保存参数信息
        this.paramInfo = new GoodsParam(
          data.itemParams.info,
          data.itemParams.rule
        );
        // 2.7.保存评论信息
        if (data.rate.list) {
          this.commentInfo = data.rate.list[0];
        }
        this.$nextTick(() => {
          this.$refs.scroll.refresh();
        });
      });
    },
    _getRecommend() {
      getRecommend().then((res) => {
        this.recommend = res.data.list;
        this.$nextTick(() => {
          this.$refs.scroll.refresh();
        });
      });
    },
  },
  // watch: {
  //   $route: function (to, from) {
  //     this._getDetail();
  //     this._getRecommend();
  //     this.$refs.scroll.scrollTo(0,0,0)
  //   },
  // },
};
</script>

<style scoped>
.detail-scroll {
  height: calc(100vh - 44px - 58px);
}
.detail-swipwe {
  height: 300px;
}
.back-top {
  position: fixed;
  right: 10px;
  bottom: 60px;
}
</style>